import React,{Component} from 'react';
import Logo from '../../components/logo/logo'
import { 
  Button,
  NavBar,
  WingBlank,
  List,
  InputItem,
  WhiteSpace,
  Radio
} from 'antd-mobile';
import {connect} from 'react-redux'
import {register} from '../../redux/actions'
import {Redirect} from 'react-router-dom'

const ListItem=List.Item

class Register extends Component{
  state={
    username:'',
    password:'',
    restpassword:'',
    type:'laoban'
  }
  register=()=>{
    this.props.register(this.state)
  }

  handleChange=(name,val)=>{
    this.setState({
      [name] : val
    })
  }
  toLogin=()=>{
    this.props.history.replace('/login')
  }
 render() {
   const {msg,toRedirect}=this.props.user
   const {type}=this.state
   if(toRedirect){
     return <Redirect to={toRedirect}></Redirect>
   }
  return (
    <div>
      <NavBar> BOSS&nbsp;直&nbsp;聘 </NavBar>
      <Logo></Logo>
      <WingBlank>
        <List>
          {msg?<div className='error-msg'>{msg}</div>:null}
          <InputItem placeholder='请输入用户名' onChange={val =>{this.handleChange('username',val)}}>用户名:</InputItem>
          <WhiteSpace/>
          <InputItem placeholder='请输入密码' type='password' onChange={val =>{this.handleChange('password',val)}}>密&nbsp;码:</InputItem>
          <WhiteSpace/>
          <InputItem placeholder='请再次输入密码' type='password' onChange={val =>{this.handleChange('restpassword',val)}}>确认密码:</InputItem>
          <WhiteSpace/>
          <ListItem>
            <span>用户类型:</span>
            <Radio checked={type==='dashen'} onChange={val =>{this.handleChange('type','dashen')}}>大神</Radio>
            <Radio checked={type==='laoban'} onChange={val =>{this.handleChange('type','laoban')}}>老板</Radio>
          </ListItem>
          <WhiteSpace/>
          <Button type='primary' onClick={this.register}>注册</Button>
          <WhiteSpace/>
          <Button onClick={this.toLogin}>已有账户</Button>
        </List>
      </WingBlank>
    </div>
    
  );
  }
}

export default connect(
  state => ({user: state.user}),
  {register}
)(Register)